<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="banner"> <div id="cloud-scroll"></div> </div>

#banner { background-image: linear-gradient(120deg, #91C4FF 0%, #F0F7FF 87%); position: relative; width: 100%; height: 950px; } #cloud-scroll { background: url(http://9a2e1a2047765d2a004e-e6d2db425d8d4f2619e5cee56a48bcef.r55.cf2.rackcdn.com/clouds.png) repeat-x; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; position: absolute; -webkit-animation: 900000s backgroundScroll infinite linear; -moz-animation: 900000s backgroundScroll infinite linear; -o-animation: 900000s backgroundScroll infinite linear; -ms-animation: 900000s backgroundScroll infinite linear; animation: 900000s backgroundScroll infinite linear; } @-webkit-keyframes backgroundScroll { from { background-position: 0 0; } to { background-position: -99999999px 0; } } @keyframes backgroundScroll { from { background-position: 0 0; } to { background-position: -99999999px 0; } }